<template>
    <div class="main">
        <van-notify id="user-notify" />
        <van-dialog use-slot title="修改昵称" :show="showChangeDialog" show-cancel-button @confirm="changeNickName">
            <van-field :value="tempNickName" @change.native="changeTemp($event)" placeholder="请输入用户名" />
        </van-dialog>
        <div class="displayCard row">
            <button open-type="chooseAvatar" @chooseavatar="uploadAvatar">
                <div class="avatar row">
                    <image class="avatarImg" :src="userInfo.avatarUrl"></image>
                </div>
            </button>
            <div class="description">
                <h2 class="title" @click='() => showChangeDialog = true'>{{ userInfo.nickName }}</h2>
                <van-tag round type="success">
                    {{ userInfo.isManager ? "管理员" : "普通人员" }}
                </van-tag>
            </div>
        </div>
        <div class="row cell" v-if="forceHidden <= 10" @click="forceHidden++">
            社交功能暂时无法使用
        </div>
        <div class="row cell" v-for="(cell, index) in cells" v-show="cell.need ? forceHidden > 10 : true"
            :key="cell.content" @click="jumpTo(cell.nagvigateTo)">
            <div class="icon material-icons-outlined row" :style="{ color: cell.color || '' }">
                {{ cell.icon }}
            </div>
            <div class="content">
                {{ cell.content }}
            </div>

            <div class="icon material-icons-outlined">chevron_right</div>
        </div>
        <button open-type="openSetting" class="row cell button">
            <div class="icon material-icons-outlined row" style="color: #4caf50">
                settings
            </div>
            <div class="content">小程序权限</div>

            <div class="icon material-icons-outlined">chevron_right</div>
        </button>
        <div class="row cell" @click="jumpTo('../manager/index')" v-if="userInfo.isManager">
            <div class="icon material-icons-outlined row" style="color: #4caf50">
                manage_accounts
            </div>
            <div class="content">管理员操作</div>

            <div class="icon material-icons-outlined">chevron_right</div>
        </div>
    </div>
</template>

<script>
import $store from "@/store/index.js";
import vanTag from "@/wxcomponents/weapp/dist/tag/index";
import vanField from "@/wxcomponents/weapp/dist/field/index";
import Notify from "@/wxcomponents/weapp/dist/notify/notify";

import { mapState } from "vuex";

const date = wx.getStorageSync('last-login')
let allow = 0
if (date) {

    const a = Date.now() - new Date(date).getTime()
    console.log('相隔时间', a);
    if (a >= 1000 * 60 * 60) {
        console.log('允许查看');
        allow = 100
    }
}
export default {
    components: { vanTag, vanField },
    mounted() { },
    computed: {
        ...mapState({
            userInfo: (state) => state.user.userInfo,
        }),
    },
    methods: {
        changeTemp(e) {
            this.tempNickName = e.detail
        },
        uploadAvatar(info) {

            const url = info.detail.avatarUrl
            if (url.startsWith("http://tmp/")) {
                Notify({
                    type: "danger",
                    message: "请使用微信头像！",
                    selector: "#user-notify",
                });
            } else {
                //TODO 微信接口尚未稳定
                Notify({
                    type: "danger",
                    message: "接口开发中",
                    selector: "#user-notify",
                });
            }
        },
        changeNickName() {
            $store.dispatch("changeUserData", { nickName: this.tempNickName }).then(res => {
                console.log(res)
                Notify({
                    type: "success",
                    message: "修改成功",
                    selector: "#user-notify",
                });
            }).catch((e) => {
                Notify({
                    type: "danger",
                    message: "修改失败",
                    selector: "#user-notify",
                });
                console.error(e)
            })
        },
        jumpTo(url) {
            if (url === "../editor/index") $store.commit("resetEditingXin");
            wx.navigateTo({
                url,
            });
        },
        getUserProfile() {
            wx.getUserProfile({
                desc: "首次登录获取您的基本信息",
            }).then(({ userInfo }) => {
                $store.dispatch("login", userInfo);
            });
        },
    },
    data() {
        return {
            showChangeDialog: false,
            tempNickName: "",
            forceHidden: allow,
            cells: [
                {
                    icon: "bookmark_border",
                    content: "我的心语签",
                    nagvigateTo: "./myXin",
                    color: "#dc4518",
                    need: true,
                },
                {
                    icon: "edit",
                    content: "编辑心语签",
                    nagvigateTo: "../editor/index",
                    color: "#ec8c32",
                    need: true,
                },
                {
                    icon: "favorite",
                    content: "收藏的心语签",
                    nagvigateTo: "./favorite",
                    color: "#ff005e",
                },
                {
                    icon: "help",
                    content: "帮助与反馈",
                    nagvigateTo: "./feedback",
                    color: "#268aff",
                },
            ],
        };
    },
};
</script>

<style lang="less" scoped>
button {
    background: transparent
}

button:after {
    border: none
}


.main {
    height: 100%;
    width: 100%;
    background-color: #f9fafb;
}

.displayCard {
    background-color: #fff;
    min-height: 256rpx;
    justify-content: space-around;

    .avatar {
        margin: 0 64rpx;
        border-radius: 50%;
        overflow: hidden;
        height: 128rpx;
        width: 128rpx;
        background-color: #f9fafb;

        .avatarImg {
            height: 100%;
            width: 100%;
        }
    }

    .description {
        flex: 1;

        .marker {
            font-size: 32rpx;
            font-weight: lighter;
        }
    }
}

.cell {
    box-shadow: 0 8px 12px #ebedf0;
    background-color: #fff;
    margin: 32rpx 32rpx;
    padding: 32rpx 0;
    border-radius: 32rpx;

    .icon {
        margin: 0 32rpx;
        font-size: 48rpx;
    }

    .content {
        flex: 1;
        padding: 0 4rpx;
    }
}

.button {
    line-height: 0;
    outline: none;
    text-align: left;
    font-size: 30rpx;
}
</style>
